import { useState } from 'react';
import { Link } from 'react-scroll';

import { declension } from '@/shared/lib/declension';
import { getImageUrl } from '@/shared/lib/images';
import { Button, ButtonVariants } from '@/shared/ui/Button';
import cn from 'classnames';
import Image from 'next/image';

import cs from './CompanyCard.module.scss';

export const CompanyCard = ({
  image,
  title,
  description,
  amount,
}: {
  image: string;
  title: string;
  description: string;
  amount?: number;
}) => {
  const [isShowAll, setIsShowAll] = useState(false);
  return (
    <div className={cs.card}>
      <div className={cs.image}>
        <Image alt={title} fill src={getImageUrl(image)} />
      </div>
      <div className={cs.text}>
        <div className={cs.title_container}>
          <h2 className={cs.title}>{title}</h2>
          {amount && (
            <Link className={cs.info} duration={400} offset={-100} smooth spy to="materials">
              {amount} {declension(amount, ['материал', 'материала', 'материалов'])}
            </Link>
          )}
        </div>
        <p className={cn(cs.description, !isShowAll && description.length > 120 && cs.hidden_content)}>
          {description}
          {!isShowAll && description.length > 120 && (
            <Button
              className={cs.show_all}
              data-testid="button-show_all"
              onClick={() => setIsShowAll(true)}
              variant={ButtonVariants.Link}
            >
              Еще
            </Button>
          )}
        </p>
      </div>
    </div>
  );
};
